import React, { Component } from 'react'
import { Link } from 'react-router-dom';

import Header from '../../components/Header/header';
import { reqcate, reqcategoods } from '../../request/api';

import { imgPre } from "../../request/http";
import './cate.less';

export default class cate extends Component {
  constructor() {
    super();
    this.state = {
      getcate: [],
      getcategoods: [],
      n: 0,
      fid: null,
      name: "时令水果"
    }
  }
  componentDidMount() {
    reqcate().then(res => {
      this.setState({
        getcate: res.data.list,
      })
    })
    reqcategoods({ fid: 1 }).then(res => {
      this.setState({
        getcategoods: res.data.list
      })
    })
  }
  changeN(index, id, name) {
    this.setState({
      fid: id,
      n: index,
      name: name
    }, () => {
      reqcategoods({ fid: this.state.fid }).then(res => {
        this.setState({
          getcategoods: res.data.list
        })
      })
    })
  }
  render() {
    let { getcate, n, getcategoods, name } = this.state;
    // console.log(getcate);
    // console.log(getcategoods);
    return (
      <div className='cate'>
        <Header title="商品分类" back></Header>
        <div className="con">
          <div className="left">
            {getcate.map((item, index) => {
              return (
                <div
                  key={item.id}
                  className={index == n ? "active" : ""}
                  onClick={() => { this.changeN(index, item.id, item.catename) }}>
                  {item.catename}
                </div>
              )
            })}
          </div>


          <div className="right">

            <div className="item">
              <h3>{name}</h3>
              <div className="item-con">
                {getcategoods.map(i => {
                  return (
                    <Link to={"/detail/"+i.id+"/1"} className="item-every" key={i.id}>
                      <img src={imgPre + i.img} alt="" />
                      <div className="item-every-r">
                        <div>{i.goodsname}</div>
                        <div><span>{'￥' + i.price}</span><i>{'￥' + i.market_price}</i></div>
                        <p>{i.description}</p>
                      </div>
                    </Link>
                  )
                })}
              </div>
            </div>

          </div>
        </div >
      </div >
    )
  }
}
